<template>
	<view class="formula-pages">
		<SelectHouse :info="selectInfo"></SelectHouse>
		<view class="menu-block">
			<view class="menu-item" v-for="(item,index) in menuList" :key="index" :class="menuTab>=index?'active':''">
				<view class="menu-info">
					<view class="number">{{index+1}}</view>
					<view class="text">{{item.title}}</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<template v-if="menuTab==0">
			<view class="info-block">
				<view class="form-item">
					<view class="title-item">
						<view class="form-title">上期到期时间</view>
					</view>
					<view class="form-content">
						<view class="form-crl">{{form.time}}</view>
					</view>
				</view>
				<view class="form-item">
					<view class="title-item">
						<view class="must">*</view>
						<view class="form-title">续租时段</view>
					</view>
					<view class="form-content">
						<uni-datetime-picker v-model="form.datetimerange" type="daterange" />
					</view>
				</view>
			</view>
			<view class="btn normal" @click="submit">提交</view>
		</template>
		<template v-if="menuTab==1||menuTab==2&&!contractAddress">
			<view class="warning-block">
				<image :src="imgStorage+'/login/warning.png'" class="info-img"></image>
				<template v-if="menuTab==1">
					<view class="warning-title">{{menuList[1].name}}</view>
					<view class="warning-text">{{menuList[1].createTime}}</view>
					<view class="warning-text">{{menuList[1].content}}</view>
				</template>
				<template v-if="menuTab==2">
					<view class="warning-title">{{menuList[2].name}}</view>
					<view class="warning-text">{{menuList[2].createTime}}</view>
					<view class="warning-text">{{menuList[2].content}}</view>
				</template>
			</view>
			<view class="btn normal" @click="switchTab">返回首页</view>
		</template>
		<template v-if="menuTab==3&&contractAddress">
			<view class="warning-block">
				<!-- <image :src="backendStorage+item" v-for="(item,index) in contractPicture" :key="index"></image> -->
				<iframe :src="backendStorage+contractAddress" style="width: 100%;height: 600rpx"></iframe>
				<sp-sign-board ref="signBoardRef" sid="sign-board" horizontal bgColor="#f5f5f5" :mark-text="markText"
					horizontal="true" @reset="reset" @firstTouchStart="firstTouchStart" :need-back="false"
					class="sign-block"></sp-sign-board>
			</view>
			<view class="btn normal" @click="">签署合同</view>
		</template>
		<template v-if="menuTab==5">
			<view class="warning-block">
				<image :src="imgStorage+'/login/success.png'" class="info-img"></image>
				<view class="warning-title">续签成功</view>
			</view>
			<view class="btn-item">
				<view class="small-btn cancel" @click="switchTab">返回首页</view>
				<view class="small-btn normal">下载合同</view>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js';
	import {
		SelectHouse
	} from '@/components/SelectHouse.vue'
	import {
		getStorage
	} from '@/util/auth.js';
	import {
		applyForFwRenewalRecordApi,
		getRenewalRecordByIdApi
	} from '@/api/renewal.js'
	import {
		uploadFile
	} from '@/api/file.js';
	export default {
		components: {
			SelectHouse
		},
		data() {
			return {
				menuTab: 0,
				menuList: [{
						id: 1,
						name: '续租申请'
					},
					{
						id: 2,
						name: '房管中心审核'
					},
					{
						id: 3,
						name: '签订准备'
					},
					{
						id: 4,
						name: '签订合同'
					},
					{
						id: 5,
						name: '续租成功'
					}
				],
				form: {
					time: '2024-12-31',
					idValue: null,
					datetimerange: []
				},
				rule: {
					datetimerange: {
						name: '续租时段',
						required: true
					}
				},
				selectInfo: {},
				id: null,
				contractAddress: '',
				markText: '',
				contractPicture: []
			}
		},
		methods: {
			geDetail() {
				getRenewalRecordByIdApi({
					idValue: this.id
				}).then((res) => {
					this.menuList = res.currentNodeList
					if (res.status) {
						this.menuTab = res.status
					}
					if (res.contractAddress) {
						this.menuTab = 3
						this.contractAddress = res.contractAddress
					}
					if (res.contractPicture) {
						this.contractPicture = res.contractPicture
					}
				})
			},
			submit() {
				if (validate(this.form, this.rule)) {
					uni.showLoading({
						title: '提交中！',
						mask: true,
					})
					applyForFwRenewalRecordApi({
						idValue: this.form.idValue,
						paymentStart: this.form.datetimerange[0],
						paymentEnd: this.form.datetimerange[1]
					}).then((res) => {
						this.showToast('提交成功！', () => {
							this.navigate('/page_pack/my_pages/relet/relet')
						}, 1000)
					})
				}
			},
			refreshMark() {
				const currentDate = new Date()
				const year = currentDate.getFullYear()
				const month = String(currentDate.getMonth() + 1).padStart(2, '0')
				const day = String(currentDate.getDate()).padStart(2, '0')
				const hours = String(currentDate.getHours()).padStart(2, '0')
				const minutes = String(currentDate.getMinutes()).padStart(2, '0')
				const seconds = String(currentDate.getSeconds()).padStart(2, '0')

				this.markText = [`${year}-${month}-${day}`, `${hours}:${minutes}:${seconds}`]
			},
			firstTouchStart() {
				// 在第一次开始触碰时，更新一下时间水印，防止滞留时间太长造成时间误差（非必要）
				this.refreshMark()
				// 手动调用组件内绘制水印方法重新绘制
				this.$refs.signBoardRef.drawMark(this.markText)
			},
			reset() {
				this.refreshMark()
			}
		},
		onLoad(e) {
			this.id = e.id
			// 生成水印内容
			this.refreshMark()
			uni.$on('getSignImg', (data) => {
				console.log(data)
				let file = data.path
				uploadFile(file).then((res) => {
					this.info.imgList.push(res);
				});
			})
		},
		onShow() {
			this.selectInfo = getStorage('selectInfo')
			this.form.idValue = this.selectInfo.idValue
			this.form.time = this.selectInfo.expirationDate
			this.id = this.selectInfo.idValue
			this.geDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.formula-pages {
		padding: 30rpx;

		.menu-block {
			background-color: #fff;
			border-radius: 30rpx;
			padding: 40rpx 10rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;

			.menu-item:last-child {
				.line {
					display: none;
				}
			}

			.menu-item.active {
				.menu-info {
					.number {
						background-color: $theme-color;
					}

					.text {
						color: $theme-color;
					}
				}

				.line {
					background-color: $theme-color;
				}
			}

			.menu-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: calc(100% / 5);

				.menu-info {
					display: flex;
					flex-direction: column;
					align-items: center;

					.number {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: #D8D8D8;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
					}

					.text {
						font-size: 22rpx;
						margin-top: 30rpx;
						color: #AAAAAA;
					}
				}

				.line {
					width: 34rpx;
					height: 2rpx;
					background-color: #D8D8D8;
					position: absolute;
					margin-top: -50rpx;
					margin-left: 110rpx;
				}
			}
		}

		.info-block {
			background-color: #fff;
			padding: 40rpx 30rpx;
			border-radius: 30rpx;
			margin-top: 30rpx;

			.form-item:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}

			.form-item {
				border-bottom: 1px solid #f7f7f7;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				font-size: 30rpx;

				.title-item {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.must {
						color: $theme-color;
					}

					.form-title {
						font-size: 30rpx;
					}
				}

				.form-content {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.warning-block {
			min-height: 50vh;
			margin-top: 30rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.info-img {
				width: 240rpx;
				height: 240rpx;
				margin-bottom: 30rpx;
			}

			.warning-title {
				font-weight: bold;
				font-size: 34rpx;
				margin-bottom: 70rpx;
			}

			.warning-text {
				font-size: 30rpx;
				margin-top: 20rpx;
			}

			.sign-block {
				width: 100%;
				height: 500rpx;
			}
		}

		.btn {
			height: 90rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}

		.btn-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.small-btn {
				width: 320rpx;
				height: 90rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>